<template>
  <view class="orderBillDetail">
    <div class="order-item flex-col">
      <div class="title items-center">
        <img
          :src="info.storeLogo || changeUrl"
          alt=""
          class="logo"
          mode="aspectFit"
        />
        <span class="store-name">{{ info.storeName || "" }} ></span>
      </div>
      <div class="content flex">
        <div class="left justify-center items-center">
          <img
            :src="info.coverUrl || changeUrl"
            alt=""
            class="pic"
            mode="aspectFit"
          />
        </div>
        <div class="right flex-col">
          <p class="goods-title ellipsis_1">
            {{ info.goodsName || "" }}
          </p>
          <span class="spec">套餐：{{ info.specName || "" }}</span>
          <div class="specss">
            <span class="rang-date spec"
              >租期:{{ info.startEndTimeString || "" }}</span
            >
            <span class="num spec">X{{ info.num || 1 }}</span>
          </div>
          <div class="all-rang items-center flex">
            <span class="name">总租金：</span>￥<span class="rangnum">{{
              info.allRentFee || 0
            }}</span
            >（{{ info.rentStage || "" }}期）
          </div>
          <div class="all-rang items-center flex">
            <span class="name">续租租金:</span>￥<span class="rangnum">{{
              info.allRentFee || 0
            }}</span
            >（{{ info.rentStage || "" }}期）
          </div>
        </div>
      </div>
      <div class="pingtai">
        <div class="pingtai-lf">
          <div class="lf-img">
            <img src="../../static/icones/orderlist23.png" alt="" />
          </div>
          <div class="lfserve">联系商家</div>
        </div>
        <div class="pingtai-ri" @tap="serveShow = true">
          <div class="ri-img">
            <img src="../../static/icones/orderlist22.png" alt="" />
          </div>
          <div class="lfserve">平台介入</div>
        </div>
      </div>
    </div>
    <div class="order-lists connom">
      <div class="rent-info">
        <div class="rentinfoes">
          <div class="item">
            <span class="text"
              ><span class="money">¥</span>{{ info.allRentFee || 0 }}</span
            >
            <label class="label">实付租金</label>
          </div>
          <img class="line" src="../../static/icones/line1.png" alt="" />
          <div class="item">
            <span class="text"
              ><span class="money">¥</span>{{ info.paidFree || 0 }}</span
            >
            <label class="label">待付租金</label>
          </div>
        </div>
        <view class="tips"
          >账单到期将通过支付宝免密支付方式还款，请注意查收信息</view
        >
      </div>
      <div class="lis">
        <div class="li">
          <div class="liheader">
            <div class="header-lf">
              <img src="../../static/icones/tags1.png" alt="" />
              <!-- <img src="../../static/icones/tags2.png" alt="" /> -->
              <!-- <img src="../../static/icones/tags3.png" alt="" /> -->
              <!-- <img src="../../static/icones/tags4.png" alt="" /> -->
              <span>第11/12期</span>
            </div>
            <div class="header-ri">待支付</div>
            <!-- <div class="header-ri pay">已支付</div> -->
          </div>
          <div class="tenancy">2021/07/13-2022/07/13</div>
          <div class="liprice">
            <div class="price-lf">¥<span class="price">453.27</span></div>
            <div class="price-ri" @click="capitalShow = true">去支付</div>
          </div>
          <div class="timer">预计扣款日：2022/6/13</div>
        </div>
        <div class="li">
          <div class="liheader">
            <div class="header-lf">
              <img src="../../static/icones/tags1.png" alt="" />
              <!-- <img src="../../static/icones/tags2.png" alt="" /> -->
              <!-- <img src="../../static/icones/tags3.png" alt="" /> -->
              <!-- <img src="../../static/icones/tags4.png" alt="" /> -->
              <span>第11/12期</span>
            </div>
            <div class="header-ri">待支付</div>
          </div>
          <div class="tenancy">2021/07/13-2022/07/13</div>
          <div class="liprice">
            <div class="price-lf">¥<span class="price">453.27</span></div>
            <div class="price-ri" @click="capitalShow = true">去支付</div>
          </div>
          <div class="timer">预计扣款日：2022/6/13</div>
        </div>
      </div>
    </div>
    <view class="modals">
      <u-modal
        :show="serveShow"
        :showConfirmButton="false"
        closeOnClickOverlay
        @close="() => (serveShow = false)"
      >
        <view class="slot-content">
          <view class="servea">
            <view class="serve-lf">
              <view class="serve-img">
                <img src="../../static/icones/icon2.png" alt="" />
              </view>
              <span class="server">在线客服</span>
            </view>
            <view class="serve-ri"
              ><img src="../../static/icones/icon4.png" alt=""
            /></view>
          </view>
          <view class="servea">
            <view class="serve-lf">
              <view class="serve-img">
                <img src="../../static/icones/icon3.png" alt="" />
              </view>
              <span class="server">热线客服</span>
            </view>
            <view class="serve-ri"
              ><img src="../../static/icones/icon4.png" alt=""
            /></view>
          </view>
          <!-- <view class="servecanner">
            <view class="serve-bo">
              <view class="serve-img">
                X<img src="../../static/icones/icon5.png" alt="" />
              </view>
            </view>
          </view> -->
        </view>
      </u-modal>
    </view>
    <view class="capital">
      <u-modal :show="capitalShow" :title="title">
        <view class="capitaltitle">
          <view class="prices">¥<span class="price">453.27</span></view>
          <view>账单租期：2021/12/12-2022/12/12</view>
          <view class="bill">账单类型：租赁账单</view>
        </view>
        <u-button
          slot="confirmButton"
          text="确认支付"
          type="primary"
          shape="circle"
          @click="capitalShow = false"
        ></u-button>
      </u-modal>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      info: [],
      changeUrl: "../../static/icones/icon11.png",
      serveShow: false,
      capitalShow: false,
      title: "是否确认支付",
    };
  },
};
</script>
<style lang="scss" scoped>
.orderBillDetail {
  width: 100vw;
  background-color: #f5f5f5;
  padding: 12px;
  .connom {
    width: 100%;
    min-height: 101px;
    font-size: 14px;
    color: #3d3d3d;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
  }
  .order-item {
    width: 100%;
    min-height: 151px;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    background: #ffffff;
    .title {
      height: 45px;
      width: 100%;
      padding: 0 15px;
      border-bottom: 1px solid #f5f5f5;
      .logo {
        width: 18px;
        height: 18px;
        border-radius: 50%;
      }
      .store-name {
        color: #000000;
        font-size: 14px;
        margin-left: 4px;
        line-height: 20px;
      }
    }
    .content {
      padding: 15px;
      width: 100%;
      min-height: 107px;
      border-bottom: 1px solid #e4e4e4;
      .left {
        width: 82px;
        height: 82px;
        background-color: #f9f9f9;
        margin-right: 12px;
        .pic {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex: 1;
        .goods-title {
          color: #333333;
          font-size: 14px;
          max-width: 210px;
          line-height: 20px;
        }
        .spec {
          color: #aaaaaa;
          font-size: 12px;
          line-height: 17px;
          margin-top: 6px;
        }
        .specss {
          display: flex;
          justify-content: space-between;
        }
        .all-rang {
          min-width: 210px;
          color: #3d3d3d;
          font-family: PingFang SC Medium;
          font-size: 14px;
          font-weight: normal;
          line-height: 20px;
          margin-top: 6px;
          display: flex;
          justify-content: flex-end;
          .rangnum {
            font-family: DINPro-Bold;
            font-size: 18px;
            font-weight: bold;
            line-height: 21px;
            letter-spacing: 0em;
          }
        }
        // .all-rang {
        //   width: 210px;
        //   color: #333333;
        //   font-size: 14px;
        //   font-weight: bold;
        //   line-height: 20px;
        //   margin-top: 6px;
        //   .num {
        //     margin-left: auto;
        //   }
        // }
      }
    }
    .pingtai {
      width: 100%;
      height: 44px;
      color: #3d3d3d;
      font-size: 14px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      // background-color: rgb(224, 140, 140);
      .pingtai-lf,
      .pingtai-ri {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .lf-img,
        .ri-img {
          width: 20px;
          height: 20px;
          margin-left: 20px;
          margin-right: 3px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .order-lists {
    width: 100%;
    min-height: 132px;
    .rent-info {
      width: 100%;
      min-height: 132px;
      padding: 15px 20px;
      border-top: 1px solid #f5f5f5;
      font-size: 12px;
      color: #fff;
      border-radius: 10px;
      background: linear-gradient(
        291deg,
        #157afe 0%,
        #157afe 0%,
        #66a8ff 100%,
        #66a8ff 100%
      );
      box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.05);
      // display: flex;
      // justify-content: space-around;
      // align-items: center;
      margin-top: 12px;
      .rentinfoes {
        width: 100%;
        min-height: 74px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .line {
          width: 1px;
          height: 30px;
        }
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          .text {
            font-size: 18px;
            line-height: 20px;
            font-family: DINPro-Bold;
            font-weight: 700;
            .money {
              font-size: 14px;
              font-family: PingFang SC Bold;
              font-weight: normal;
              margin-right: 4px;
            }
          }
          .label {
            font-size: 12px;
            line-height: 17px;
            margin-top: 4px;
            font-family: PingFang SC Bold;
          }
        }
      }
      .tips {
        width: 100%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        //   color: #fff;
        //   font-size: 10px;
        //   position: absolute;
        //   left: 26px;
        //   bottom: 12px;
      }
    }
    .lis {
      width: 100%;
      height: 100%;
      padding: 15px;
      .li {
        width: 100%;
        min-height: 169px;
        font-size: 14px;
        color: #3d3d3d;
        border-bottom: 1px solid #e4e4e4;
        font-family: PingFang SC Medium;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        &:last-child {
          border-bottom: none;
        }
        .liheader {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .header-lf {
            display: flex;
            align-items: center;
            img {
              width: 44px;
              height: 21px;
              border-radius: 5px;
              margin-right: 6px;
            }
          }
          .header-ri {
            color: #157afe;
            &.pay {
              color: #9d9d99;
            }
          }
        }
        .tenancy {
          font-size: 12px;
          color: #9d9d99;
        }
        .liprice {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .price-lf {
            .price {
              font-size: 18px;
              font-family: DINPro-Bold;
              font-weight: 700;
            }
          }
          .price-ri {
            width: 76px;
            height: 34px;
            line-height: 34px;
            border-radius: 22px;
            background: linear-gradient(
              294deg,
              #157afe 0%,
              #157afe 0%,
              #66a8ff 100%,
              #66a8ff 100%
            );
            color: #fff;
            text-align: center;
          }
        }
      }
    }
  }

  .modals {
    position: relative;
    .slot-content {
      width: 100%;
      height: 150px;
      .servea {
        width: 100%;
        height: 50%;
        padding: 0 25px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .serve-lf {
          display: flex;
          // padding-top: 10px;
          .serve-img {
            width: 30px;
            height: 50%;
            img {
              width: 25px;
              height: 25px;
            }
          }
          .server {
            color: #3d3d3d;
            font-size: 15px;
          }
        }
        .serve-ri {
          img {
            width: 8px;
            height: 20px;
          }
        }
      }
      .servecanner {
        width: 100%;
        height: 70px;
        // opacity: 0.6;
        z-index: 100;
        color: #000;
        .serve-bo {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          // background-color: rgb(212, 77, 77);
          .serve-img {
            width: 30px;
            height: 30px;
            img {
              width: 29px;
              height: 29px;
            }
          }
        }
      }
    }
  }
  .capital {
    .capitaltitle {
      width: 81%;
      min-height: 114px;
      line-height: 28px;
      text-align: left;
      font-family: PingFang SC Medium;
      font-size: 14px;
      color: #333333;
      padding: 12px 0;
      .prices {
        width: 100%;
        text-align: center;
        font-size: 20px;
        .price {
          color: #3d3d3d;
          font-size: 27px;
          font-family: DINPro-Bold;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
